﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "BOM管理";
}

<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />
<style>
    .operation-buttons {
        display: flex;
        gap: 5px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
    }
    
    .operation-buttons .layui-btn {
        flex-shrink: 0;
        margin: 0;
    }
    
    .operation-buttons .layui-btn-xs {
        padding: 0 8px;
        height: 24px;
        line-height: 24px;
        font-size: 12px;
    }
    
    /* 确保操作列有足够空间 */
    .layui-table td:last-child {
        padding: 8px 12px;
        white-space: nowrap;
    }
</style>

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">BOM编号</label>
        <div class="layui-input-inline">
            <input type="text" id="bomCode" class="layui-input" placeholder="请输入BOM编号">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">BOM主题</label>
        <div class="layui-input-inline">
            <input type="text" id="bomTitle" class="layui-input" placeholder="请输入BOM主题">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">成品名称</label>
        <div class="layui-input-inline">
            <input type="text" id="productsName" class="layui-input" placeholder="请输入成品名称">
        </div>
    </div>
    <div class="layui-inline">
        <button type="button" class="layui-btn" onclick="GetBomList()">
            <i class="layui-icon layui-icon-search"></i> 查询
        </button>
        <button type="button" class="layui-btn layui-btn-normal" onclick="AddBom()">
            <i class="layui-icon layui-icon-add-1"></i> 新增
        </button>
        <button type="button" class="layui-btn layui-btn-primary" onclick="ResetSearch()">
            <i class="layui-icon layui-icon-refresh"></i> 重置
        </button>
    </div>
</div>

<table class="layui-table" lay-size="sm">
    <thead>
        <tr>
            <th style="width:60px;">编号</th>
            <th style="width:120px;">BOM编号</th>
            <th style="width:150px;">BOM主题</th>
            <th style="width:120px;">版本</th>
            <th style="width:150px;">成品名称</th>
            <th style="width:120px;">产品编号</th>
            <th style="width:120px;">规格型号</th>
            <th style="width:80px;">单位</th>
            <th style="width:100px;">品牌</th>
            <th style="width:80px;">状态</th>
            <th style="width:100px;">日产量</th>
            <th style="width:120px;">创建时间</th>
            <th style="width:200px;">备注</th>
            <th style="width:220px;">操作</th>
        </tr>
    </thead>
    <tbody id="body"></tbody>
</table>

<div id="demo-laypage-all"></div>

<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<script>
    var pageindex = 1;
    var pagesize = 15;
    var total = 0;

    $(function(){
        GetBomList();
    });

    function GetBomList(){
        var bomCode = $('#bomCode').val() || '';
        var bomTitle = $('#bomTitle').val() || '';
        var productsName = $('#productsName').val() || '';

        $('#body').html('<tr><td colspan="14" style="text-align:center;color:#999;">数据加载中...</td></tr>');

        $.ajax({
            url: 'http://localhost:5141/api/Bom/GetBom',
            type: 'GET',
            data: {
                pageIndex: pageindex,
                pageSize: pagesize,
                bomCode: bomCode,
                bomTitle: bomTitle,
                productsName: productsName
            },
            success: function(res){
                if(res && res.pageData){
                    total = res.totalCount || 0;
                    var str = '';
                    if(res.pageData.length > 0){
                        $(res.pageData).each(function(){
                            var statusText = this.status ? '<span class="layui-badge layui-bg-green">默认版本</span>' : '<span class="layui-badge layui-bg-gray">非默认</span>';
                            var desc = this.desc || '';
                            var createTime = this.createTime ? new Date(this.createTime).toLocaleString('zh-CN') : '';
                            
                            str += `<tr>
                                        <td>${this.id}</td>
                                        <td>${this.bomCode || ''}</td>
                                        <td title="${this.bomTitle || ''}">${(this.bomTitle || '').length > 15 ? (this.bomTitle || '').substring(0,15)+'...' : (this.bomTitle || '')}</td>
                                        <td>${this.version || ''}</td>
                                        <td title="${this.productsName || ''}">${(this.productsName || '').length > 15 ? (this.productsName || '').substring(0,15)+'...' : (this.productsName || '')}</td>
                                        <td>${this.productsCode || ''}</td>
                                        <td title="${this.productsModel || ''}">${(this.productsModel || '').length > 12 ? (this.productsModel || '').substring(0,12)+'...' : (this.productsModel || '')}</td>
                                        <td>${this.productsUnit || ''}</td>
                                        <td title="${this.brand || ''}">${(this.brand || '').length > 8 ? (this.brand || '').substring(0,8)+'...' : (this.brand || '')}</td>
                                        <td>${statusText}</td>
                                        <td>${this.output || 0}</td>
                                        <td>${createTime}</td>
                                        <td title="${desc}">${desc.length > 15 ? desc.substring(0,15)+'...' : desc}</td>
                                        <td>
                                            <div class="operation-buttons">
                                                <button class="layui-btn layui-btn-xs" onclick="ViewBom(${this.id})"><i class="layui-icon layui-icon-search"></i> 查看</button>
                                                <button class="layui-btn layui-btn-xs layui-btn-normal" onclick="EditBom(${this.id})"><i class="layui-icon layui-icon-edit"></i> 编辑</button>
                                                <button class="layui-btn layui-btn-xs layui-btn-danger" onclick="DelBom(${this.id})"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                            </div>
                                        </td>
                                    </tr>`;
                        });
                    }else{
                        str = '<tr><td colspan="14" style="text-align:center;color:#999;">暂无数据</td></tr>';
                    }
                    $('#body').html(str);
                    initPagination();
                }else{
                    $('#body').html('<tr><td colspan="14" style="text-align:center;color:#f00;">数据加载失败</td></tr>');
                    total = 0;
                    initPagination();
                }
            },
            error: function(xhr, status, error){
                console.error('请求失败:', error);
                $('#body').html('<tr><td colspan="14" style="text-align:center;color:#f00;">数据加载失败，请重试</td></tr>');
                total = 0;
                initPagination();
            }
        });
    }

    function initPagination(){
        layui.use(['laypage'], function(){
            var laypage = layui.laypage;
            laypage.render({
                elem: 'demo-laypage-all',
                count: total,
                limit: pagesize,
                limits: [10,15,20,25,30,50],
                layout: ['count','prev','page','next','limit','refresh','skip'],
                jump: function(obj, first){
                    if(!first){
                        pageindex = obj.curr;
                        pagesize = obj.limit;
                        GetBomList();
                    }
                }
            });
        });
    }

    function ResetSearch(){
        $('#bomCode').val('');
        $('#bomTitle').val('');
        $('#productsName').val('');
        pageindex = 1;
        GetBomList();
    }

    function DelBom(id){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('确认删除该BOM吗？删除后无法恢复！',{icon:3,title:'提示',btn:['确定','取消']}, function(index){
                var load = layer.load(1,{shade:[0.3,'#000']});
                $.ajax({
                    url: 'http://localhost:5141/api/Bom/DeleteBom',
                    type: 'POST',
                    data: JSON.stringify({ id: id }),
                    contentType: 'application/json',
                    success: function(res){
                        layer.close(load);
                        if(res && res.code === 200 && res.data > 0){
                            layer.msg('删除成功',{icon:1,time:1500});
                            GetBomList();
                        }else{
                            layer.msg('删除失败: ' + (res.message || '未知错误'),{icon:2});
                        }
                    },
                    error: function(xhr, status, error){
                        layer.close(load);
                        console.error('删除BOM失败:', {xhr, status, error});
                        layer.msg('请求失败: ' + error,{icon:2});
                    }
                });
                layer.close(index);
            });
        });
    }

    function openInContainer(url, title){
        if(window.parent && window.parent.loadPage){
            window.parent.loadPage(url, title || document.title);
        }else{
            location.href = url;
        }
    }

    function ViewBom(id){
        localStorage['bomId'] = id;
        openInContainer('/Bom/BomView', '查看BOM');
    }

    function EditBom(id){
        localStorage['bomId'] = id;
        openInContainer('/Bom/BomEdit', '编辑BOM');
    }

    function AddBom(){
        openInContainer('/Bom/BomAdd', '新增BOM');
    }
</script>
